<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />

		<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
		Remove this if you use the .htaccess -->
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

		<title>D3Weather</title>
		<meta name="description" content="" />
		<meta name="author" content="PerronJones" />

		<meta name="viewport" content="width=device-width; initial-scale=1.0" />

		<link rel="stylesheet" type="text/css" href="css/D3Weather.css" />

		<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
		<script type="text/javascript" src="js/jquery-ui-1.8.21.custom.js"></script>
		<script type="text/javascript" src="js/processing-1.4.1-api.js" ></script>
		<script type="text/javascript" src="js/processing-1.4.1.js" ></script>
		<script type="text/javascript" src="js/d3lib/d3.js" ></script>
		<script type="text/javascript" src="js/d3.v2.js" ></script>

	</head>

	<body>
		<div>
			<header>
				<h1>D3Weather</h1>
			</header>

			<div id="viz">

			</div>

			<footer>
				<p>
					&copy; Copyright  by PerronJones
				</p>
			</footer>
		</div>

		<!--
		-----------------------------------------------------------------------------------------------------------------
		-----------------------------------------------------------------------------------------------------------------
		----------------------------SCRIPT-------------------------------------------------------------------------------
		-----------------------------------------------------------------------------------------------------------------
		-----------------------------------------------------------------------------------------------------------------
		-->
		<script type="text/javascript">
			var dataList = [];

			var vue = -1;

			var currentLocation = "";
			var currentZip = "";
			var currentTempF = "";

			var months = [];
			var daysNum = [];
			var daysName = [];
			var years = [];

			var HighTempFs = [];
			var lowTempFs = [];
			var tideHeights = [];
			var humidities = [];
			var precipitation = [];
			var windSpeeds = [];
			var windDirections = [];

			$(document).ready(function($) {

				getLocation();
				get10DayData();

			});

			function getLocation() {

				$.ajax({
					url : "http://api.wunderground.com/api/b7bef5bb37dd082b/conditions/q/GA/Atlanta.json",
					dataType : "jsonp",
					success : function(parsed_json) {
						try {
							currentZip = parsed_json['current_observation']['display_location']['zip'];
							currentLocation = parsed_json['current_observation']['display_location']['full'];
							currentTempF = parsed_json['current_observation']['temp_f'];
							//alert("Current temperature in " + currentLocation + " is: " + currentTempF + " F.");
						} catch(e) {
							alert('An error has occurred: ' + e.message);
						}
					}
				});

			}

			function get10DayData() {

				$.ajax({
					url : "http://api.wunderground.com/api/b7bef5bb37dd082b/forecast10day/q/GA/Atlanta.json",
					dataType : "jsonp",
					success : function(parsed_json) {
						try {
							dataList = parsed_json.forecast.simpleforecast.forecastday;
							for ( i = 0; i < dataList.length; i++) {
								months.push(dataList[i].date.monthname);
								daysNum.push(dataList[i].date.day);
								daysName.push(dataList[i].date.weekday_short);
								years.push(dataList[i].date.year);
								HighTempFs.push(dataList[i].high.fahrenheit);
								lowTempFs.push(dataList[i].low.fahrenheit);
								humidities.push(dataList[i].avehumidity);
								precipitation.push(dataList[i].pop);
								windSpeeds.push(dataList[i].avewind.mph);
								windDirections.push(dataList[i].avewind.dir);

							}
						} catch(e) {
							alert('An error has occurred: ' + e.message);
						}

						printData();
						startViz();
					}
				});

			}

			function printData() {
				for ( i = 0; i < dataList.length; i++) {
					console.log("!!!!-DAY NUMBER-!!!!: " + (i+1));
					console.log("Location: " + currentLocation);
					console.log("Zip: " + currentZip);
					console.log("Temp: " + currentTempF);
					console.log("Month: " + months[i]);
					console.log("Date: " + daysNum[i]);
					console.log("Day: " + daysName[i]);
					console.log("Year: " + years[i]);
					console.log("High: " + HighTempFs[i]);
					console.log("Low: " + lowTempFs[i]);
					console.log("Humidity: " + humidities[i]);
					console.log("Precipitation: " + precipitation[i]);
					console.log("Wind Speed: " + windSpeeds[i]);
					console.log("Wind Direction: " + windDirections[i]);
				}

			}
			
			function startViz(){
				i
			var chart = d3.select("body").append("div").attr("id", "chartDiv");

			chart.selectAll("div").data(HighTempFs).enter().append("div").attr("class", "chart").style("width", function(d) {
				return d * 10 + "px";
			}).text(function(d) {
				return d;
			});
			
			var x = d3.scale.linear().domain([0, d3.max(HighTempFs)]).range(["0px", "420px"]);

			chart.selectAll("div").data(HighTempFs).enter().append("div").attr("class", "chart").style("width", x).text(function(d) {
				return d;
			});
}
			/*
			 var myVis = d3.select("#viz")
			 .append("svg:svg")
			 .attr("width",1000)
			 .attr("height",600);

			 myVis.append("svg:axis")
			 .attr("class", "axis")
			 .attr("width", 1440)
			 .attr("height", 30)
			 .append("g")
			 .attr("transform", "translate(0,30)")
			 .call(axis)
			 .style("fill","steelblue")
			 .style("stroke","red");
			 //.on("mouseover",function(){d3.select(this).style("fill","#FFFFFF");})
			 //.on("mouseout",function(){d3.select(this).style("fill","yellow");})
			 //.on("mousedown",animate);

			 function animate()
			 {
			 d3.select(this).transition()
			 //.delay(1000)
			 .duration(5000)
			 .attr("r",300)
			 .each("end",nextstep);
			 }

			 function nextstep()
			 {
			 d3.select(this).transition()
			 .duration(200)
			 .attr("r",100)
			 .attr("cx",345)
			 .attr("cy",0);
			 }

			 */
		</script>

	</body>
</html>
